<template>
  <div class="customers container">
    <Alert v-if="alert" :message="alert"></Alert>
    <h1 class="page-header">用户管理系统</h1>
    <input type="text" class="form-control" placeholder="搜索" v-model="filterInput">
    <br/>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(customer,index) in filterBy(customers,filterInput)" :key="index">
                <td>{{customer.name}}</td>
                <td>{{customer.phone}}</td>
                <td>{{customer.email}}</td>
                <td><router-link class="btn btn-default" :to="'/customerDetail/'+customer.id">详情</router-link></td>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
import Alert from '@/components/Alert'
export default {
  name: 'customers',
  data () {
    return {
      customers:[],
      alert:"",
      filterInput:""
    }
  },
  methods:{
      fetchCusomers(){
          this.$http.get("http://localhost:3000/users")
          .then(function(res){
              //console.log(res);
              this.customers = res.body;
          })
          .catch(function(err){
              console.log(err)
          })
      },
      filterBy(customers,value){
        return customers.filter(function(customer){
          return customer.name.match(value);
        });
      }
  },
  created(){
    if(this.$route.query.alert){
      this.alert = this.$route.query.alert;
    }
      this.fetchCusomers();
  },
  updated(){
    //this.fetchCusomers();
  },
  components:{
    Alert
  }
}
</script>

<style scoped>

</style>
 